<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>墩墩面经</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<section class="warp">
			<!-- 头部 -->
			<header class="header">墩墩面经</header>
			<!-- 导航栏 -->
			<nav class="nav">
				<a href="#" class="item">
					<img src="icons/icon1.png" >
					<span>HR面试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon2.png" >
					<span>笔试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon3.png" >
					<span>技术面试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon4.png" >
					<span>模拟面试</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon5.png" >
					<span>面试技巧</span>
				</a>
				<a href="#" class="item">
					<img src="icons/icon6.png" >
					<span>薪资查询</span>
				</a>
			</nav>
			<!-- Go模块 -->
			<section class="go">
				<img src="images/go.png" >
			</section>
			<!--  -->
		</section>
		<!-- 就业指导 -->	
		<section class="content">
			<div class="con-hd">
				<h4>
					<span class="icon">
						<img src="icons/i2.png" >
					</span>
					就业指导
				</h4>
				<a href="#" class="more">更多>></a>
			</div>
			<!-- 轮播图 -->
			<div class="get_job">
			   <!-- Swiper -->
			     <div class="swiper-container get_job_info">
			       <div class="swiper-wrapper">
			         <div class="swiper-slide">
						 <a href="#"><img src="images/pic.png" ></a>
						 <p>老师叫你应对面试技巧</p>
					 </div>
			         <div class="swiper-slide">
						 <a href="#"><img src="images/pic.png" ></a>
						 <p>老师叫你应对面试技巧</p>
			         </div>
					 <div class="swiper-slide">
						 <a href="#"><img src="images/pic.png" ></a>
						 <p>老师叫你应对面试技巧</p>
					 </div>
					 <div class="swiper-slide">
						 <a href="#"><img src="images/pic.png" ></a>
						 <p>老师叫你应对面试技巧</p>
					 </div>
					 <div class="swiper-slide">
						 <a href="#"><img src="images/pic.png" ></a>
						 <p>老师叫你应对面试技巧</p>
					 </div>
					 <div class="swiper-slide">
						 <a href="#"><img src="images/pic.png" ></a>
						 <p>老师叫你应对面试技巧</p>
					 </div>
			       </div>
			     </div> 
				 <!-- Add Arrows -->
				 <div class="swiper-button-next"></div>
				 <div class="swiper-button-prev"></div>
			</div>
		</section>
		<!-- 充电学习 -->
		<section class="content study_con">
			<div class="con-hd">
				<h4>
					<span class="icon">
						<img src="icons/i1.png" >
					</span>
					充电学习
				</h4>
				<a href="#" class="more">更多>></a>
			</div>
			<!-- 轮播图 -->
			<div class="study">
			   <!-- Swiper -->
			    <div class="swiper-container study_info">
			      <div class="swiper-wrapper">
			        <div class="swiper-slide">
						<img src="images/pic1.png" >
						<h5>说地道英语，告别中式英语</h5>
						<p><span>156人</span>学习</p>
					</div>
			       <div class="swiper-slide">
						<img src="images/pic1.png" >
						<h5>说地道英语，告别中式英语</h5>
						<p><span>156人</span>学习</p>
			       </div>
				   <div class="swiper-slide">
						<img src="images/pic1.png" >
						<h5>说地道英语，告别中式英语</h5>
						<p><span>156人</span>学习</p>
				   </div>
			      </div>
			    </div>
			</div>
		</section>
		<!-- 底部 -->
		<footer class="footer">
		  <a href="#" class="item">
			<img src="./icons/home.png" alt="" />
			<p>首页</p>
		  </a>
		  <a href="#" class="item">
			<img src="./icons/ms.png" alt="" />
			<p>模拟面试</p>
		  </a>
		  <a href="#" class="item">
			<img src="./icons/net.png" alt="" />
			<p>技术面试</p>
		  </a>
		  <a href="#" class="item">
			<img src="./icons/user.png" alt="" />
			<p>我的首页</p>
		  </a>
		</footer>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script>        
		(function(){
			var swiper = new Swiper('.get_job_info', {
			     slidesPerView: 2,
			     spaceBetween: 30,
				  centeredSlides: true,
				  loop: true,
			     navigation: {
					  nextEl: '.swiper-button-next',
					  prevEl: '.swiper-button-prev',
					},
			    });     
		})() ;
		(function(){
			var swiper = new Swiper('.study_info', {
			      slidesPerView: 2.4,
			      spaceBetween: 30,
			    });    
		})() 
		  </script>
	</body>
</html>
